<template>
  <div class="present">
    <div class="shopcar">
      <div class="top">
        <div class="top-left">购物车</div>
        <div class="top-right">{{num}}</div>
      </div>
      <div style="height:5.5rem; overflow-x: hidden; overflow-y: scroll;">
        <div class="order" v-for="(item,index) of $store.state.list" :key="(item.id)">
          <div class="choose">
            {{item.desc}}
            <span class="iconfont" @click="del(index)">&#xe617;</span>
          </div>
          <div class="price">
            <div class="unit">{{item.money}}</div>
            <div>{{item.num}}份</div>
          </div>
        </div>
      </div>
    </div>
    <div class="balance">
      <div class="tatal">
        <div class="suntotal">
          <div>小计:</div>
          <div>0.00</div>
        </div>
        <div class="delivery">
          <div>外送费:</div>
          <div>9.00</div>
        </div>
        <div class="amount">
          <div>合计:</div>
          <div>{{priceAll}}</div>
        </div>
      </div>
      <div class="settle">
        <button class="set-but">进入结算></button>
      </div>
      <div class="address">
        <div class="add-one">
          <div class="add-left">送餐地址:</div>
          <div class="add-right">修改</div>
        </div>
        <div class="detail">{{$store.state.city}}</div>
      </div>
      <div class="remind">提醒：根据您最终提交订单时间，送餐时间可能略有调整。</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'IndexCar',
  data () {
    return {}
  },
  computed: {
    num () {
      let num = Number(0)
      for (let i = 0; i < this.$store.state.list.length; i++) {
        num += Number(this.$store.state.list[i].num)
      }
      return num
    },
    priceAll () {
      let num = Number(0)
      for (let i = 0; i < this.$store.state.list.length; i++) {
        num += Number(
          this.$store.state.list[i].num * this.$store.state.list[i].money
        )
      }
      return num
    }
  },
  methods: {
    del (index) {
      this.$store.state.list.splice(index, 1)
    }
  }
}
</script>

<style lang="stylus" scoped>
.present {
  width: 12%
  height: 10.5rem
  border: 1px solid #9fa4a4
  margin-left: 0.3rem
  margin-top: 0.15rem

  .shopcar {
    width: 100%
    height: 6rem

    .top {
      display: flex
      width: 100%
      heigt: 0.5rem
      background: rgb(198, 0, 10)

      .top-left {
        width: 45%
        height: 0.4rem
        color: white
        font-size: 18px
        padding-left: 0.2rem
        padding-top: 0.12rem
      }

      .top-right {
        width: 15%
        margin-left: 0.6rem
        padding-top: 0.15rem
        padding-left: 0.4rem
        background: rgb(255, 241, 0)
      }
    }

    .order {
      display: flex
      flex-wrap: wrap
      width: 88%
      margin: 0 auto
      height: 1.2rem

      .choose {
        display: flex
        width: 100%
        height: 0.4rem
        margin: 0 auto
        padding-top: 0.1rem
      }

      .price {
        display: flex
        width: 100%
        height: auto
        margin-top: 0.1rem
        border-bottom: 1px solid #9fa4a4

        .price-img {
          width: 0.4rem
          height: 0.36rem
        }

        .price-img1 {
          margin-left: 0.1rem
          width: 0.4rem
          height: 0.36rem
        }
      }

      .order-num {
        width: 0.6rem
        height: 0.32rem
        margin-left: 0.1rem
        padding-left: 0.4rem
        border: 1px solid #9fa4a4
      }

      .unit {
        height: 0.32rem
        width: 1.5rem
        padding-top: 0.03rem
        margin-left: 0.3rem
      }
    }
  }

  .balance {
    width: 100%
    height: 4.5rem

    .tatal {
      display: flex
      margin: 0 auto
      flex-wrap: wrap
      width: 90%
      height: 2rem
      border-top: 1px solid black

      .suntotal {
        margin: 0 auto
        margin-top: 0.2rem
        display: flex
        justify-content: space-between
        width: 100%
        height: 0.3rem
      }

      .delivery {
        margin: 0 auto
        margin-top: -0.2rem
        display: flex
        justify-content: space-between
        width: 100%
        height: 0.3rem
      }

      .amount {
        margin: 0 auto
        margin-top: -0.2rem
        display: flex
        justify-content: space-between
        width: 100%
        height: 0.3rem
      }
    }

    .settle {
      width: 90%
      height: 0.6rem
      margin: 0 auto

      .set-but {
        width: 100%
        height: 100%
        background: red
        color: white
        font-size: 16px
        font-weight: bold
      }
    }

    .address {
      width: 90%
      height: 1rem
      margin: 0 auto
      margin-top: 0.1rem

      .add-one {
        width: 100%
        height: 30%
        font-size: 12px
        display: flex
        justify-content: space-between

        .add-right {
          color: red
          text-decoration: underline
        }
      }

      .detail {
        width: 100%
        height: 70%
        margin-top: 0.1rem
        font-size: 12px
      }
    }

    .remind {
      width: 90%
      height: 0.5rem
      margin: 0 auto
      margin-top: 0.1rem
      font-size: 12px
    }
  }
}
</style>
